import React from 'react'
import { string } from 'prop-types'

import {CardWrapper} from './styledCard'

export default function Card({
    title,//标题
    img,//左侧图片
    infoCount,//标题下方的信息
    rightCount,//自定义卡片右侧区域
    bottomCount,//自定义卡片中心下方区域
    topCount,
    width,
    height,
    bgColor,
    click
}) {
    return (
        <CardWrapper
        width = { width }
        height = { height }
        bgColor = { bgColor }
        onClick = {click}
        >
            <div className='left'>
                <img src={img} alt="" />
            </div>
            <div className='center'>
                {
                    topCount ? (
                        topCount
                    ):(
                        <div className='title'>{title}</div>
                    ) 
                }
                <div className='info'>{infoCount}</div>
                {
                    bottomCount && <div> {bottomCount} </div>
                }
            </div>
            <div className='right'>
                {
                    rightCount && <div> {rightCount} </div>
                }
            </div>
        </CardWrapper>
    )
}

Card.defaultProps = {
    width: '3.35rem',
    bgColor: 'rgb(247,250,253)'
}

Card.propTypes = {
    title: string,
    width: string,
    height: string
}